<template>
  <el-container :style="{ height: containerHeight + 'px' }">
    <el-aside width="200px" style="border-right: 1px solid #dfe6ec">
      <LeftTreeVue @treeClick="treeClick"></LeftTreeVue>
    </el-aside>
    <el-main height>
      <!-- 搜索栏 -->
      <el-form label-width="80px" :model="listParm" :inline="true" size="small">
        <el-form-item>
          <el-input
            v-model="listParm.loginName"
            placeholder="请输入用户姓名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :icon="Search" @click="searchBtn">搜索</el-button>
          <el-button :icon="Close" @click="resetBtn" style="color: #FF7670;"
            >重置</el-button
          >
          <el-button :icon="Plus" @click="addBtn" type="primary"
          v-permission="['sys:user:add']"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table :height="tableHeigth" :data="tableData.list" border stripe>
        <el-table-column prop="loginName" label="姓名" />
        <el-table-column prop="deptName" label="所属部门" />
        <el-table-column prop="mobile" label="电话" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column label="操作" width="310" align="center">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="editBtn(scope.row)"
              :icon="Edit"
              v-permission="['sys:user:edit']"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="primary"
              :icon="Setting"
              @click="assignBtn(scope.row)"
              v-permission="['sys:user:assign']"
              >分配角色</el-button
            >
            <el-button
              size="small"
              type="danger"
              :icon="Delete"
              @click="deleteBtn(scope.row.id)"
              v-permission="['sys:user:delete']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="listParm.currentPage"
        :page-sizes="[1, 10, 20, 40, 80, 100]"
        :page-size="listParm.pageSize"
        :total="listParm.total"
        layout="total, sizes, prev, pager, next, jumper"
        background
      ></el-pagination>
    </el-main>
  </el-container>
  <!-- 新增编辑弹框 -->
  <AddAndEditVue ref="userAddRef" @save="save"></AddAndEditVue>
  <!-- 分配角色弹框 -->
  <AssignRoleVue ref="assignRoleRef"></AssignRoleVue>
</template>
<script setup lang="ts">
/**
 * 这个页面的布局有左右两个部分，左侧为树形选择框
 * 右侧为主体表格
 * 有新增和编辑的弹框，
 * 还有分配角色的弹框
 */
import { ref, reactive, onMounted, nextTick } from 'vue'
// 引入图标
import { Search, Plus, Close, Edit, Delete, Setting } from '@element-plus/icons-vue'
// 这里引入树形组件的样式，树形组件的使用方法都在自己的组件内完成
// 然后使用emit传递点击事件到父组件，供父组件使用
import LeftTreeVue from './LeftTree.vue'
// 这里引入表格的使用方法 主要是表格的查询功能，主要就是查询条件的变动和页码变动引起的查询
import useUserTable from '@/composables/user/useUserTable'
// 这里引入新增编辑弹窗
import AddAndEditVue from './AddAndEdit.vue'
// 引入表格的操作方法，主要是表格的新增编辑删除以及分配角色额的事件
// 还有就是注册两个子组件的ref这个文件和useUserTable都是主页面的操作文件
import useUser from '@/composables/user/useUser'
// 引入分配权限的弹窗的组件结构，这个组件和左侧树形组件一样，基本操作都在自己内部完成
// 只需要父组件中可以获取他的ref结构就可以，然后在父组件触发事件后，调用子组件内部的方法
import AssignRoleVue from './AssignRole.vue'
// 这里是操作分配弹窗的方法,写在这里不是很合适，可以写在公用的useUser内部
// import useAssignRole from '@/composables/user/useAssignRole'
// 分配弹窗结构出的方法
// const { assignRoleRef } = useAssignRole()
// 表格的数据
const {
  tableData,
  listParm,
  getUserList,
  treeClick,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn
} = useUserTable()
// 用户弹窗的操作方法,增删改查
const {
  userAddRef,
  addBtn,
  deleteBtn,
  editBtn,
  assignBtn,
  save,
  assignRoleRef
} = useUser(getUserList)
//容器的高度
const containerHeight = ref(0)
//表格的高度
const tableHeigth = ref(0)
onMounted(() => {
  nextTick(() => {
    containerHeight.value = window.innerHeight - 100
    tableHeigth.value = window.innerHeight - 220
  })
})
</script>
<style scoped lang="scss"></style>
